//声明变量 @size-100  @不能少
@size-100:100px;
@theme_color:red;
@var:50vh/2;
@import"libary.less";//引入libary 文件
#app{
    width: @size-100*5;
    height: @size-100*5;
    background-color: @theme_color;
    margin: 10px auto;
    .bordered(); //混入

    h1{
        color: #ffffff;
  }
  
  //混入Mixin
  //先声明一个类样式，在其他的样式中使用
  .bordered{
      border: 1px solid black;
  }
  .logo{
      width: @size-100;
      .bordered();//混入
      background-color: white;
      border-radius: 50%;
      padding: 3px;
  }
  //伪类元素  &符号表示当前选择器本身 等于#app
  &::after{
      display: block;
      content: 'hello,world';
      width:@size-100;
      height:@size-100;
      .bordered();//混入
  }
  //数学运算符（+ - * /）可以对数字，颜色，变量进行运算
  //@size=@size-100*2;//200px
  //@size1=1px*2cm;//2px
  //@size2=1px+2cm; //3px
  //@size3=1cm+10mm; //2cm
  //@size4=#224488/2; //#112244

  
}
//calc()用于计算变量或长度之间的值
  // @var=50vh/2;
  
  .box{   
      width: calc(50% + (@var - 20px));
      height: 100px;
      border: 1px solid black;
  }
//导入
//@import "libary.less"; //引入的是libary的less文件
//@import "libary.css"; //引入的是libary的css文件

